<!DOCTYPE html>
<html>
<head>
    <!-- 设置字符编码 -->
    <meta charset="UTF-8">
    <!-- 禁止移动端页面缩放 -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <!-- 阻止浏览器缓存页面内容 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" href="/stylesheets/root.css">
    <link rel="stylesheet" href="/stylesheets/forum/forum-edit.css">

    <title>发布动态</title>
</head>
<body>
    <div class="my-body">
        <div class="top-line">
            <div class="top-box">
                <div class="exit-btn">取消</div>
                <div class="title-box">动态编辑</div>
                <div class="send-btn">发布</div>
            </div>
        </div>
        <div class="text" contenteditable="true"></div>
        <div class="photo">
            <div class="photo-box">
                <div class="input-photo-btn" data-text="+"></div>
            </div>
        </div>
        <div class="send_win">
            <div class="choose-win"></div>
        </div>
    </div>

    <img class="bg" src="/images/forum/fatiebeijing.png" alt="">

    <script>
        // 取消被点击之后的跳转
        let cancel_btn = document.querySelector(".exit-btn");
        cancel_btn.addEventListener('click', (e) => {
            let new_a = document.createElement('a');
            new_a.href = "/main.html";
            new_a.click();
        });
        
        // 全局对象，用于各个代码块代码作用域的提升
        let global_var = {};
        // 编辑文字的DOM
        let content = document.querySelector('.text');

        // 上传图片的处理(显示图片、将图片存储为base64形式放到global_var里)
        (function () {
            let input_img = document.querySelector(".input-photo-btn");

            // 虚拟DOM，用于上传图片文件
            let r_in = document.createElement('input');
            r_in.type = 'file';
            r_in.setAttribute('accept', 'image/*');

            // 显示图片的DOM
            const img = document.createElement('img');
            img.src = "";
            img.style.maxWidth = '100%';  // 按需设置图片显示大小 - 本行代码后期需要修改
            img.style.maxHeight = '100%'; // 按需设置图片显示大小 - 本行代码后期需要修改
            input_img.appendChild(img);   // 将图片元素添加到页面中
            
            // 绑定上传图片的逻辑
            input_img.addEventListener('click', function (e) {
                r_in.click();
            });

            // 定义用户再次选择新图片的事件
            r_in.addEventListener('change', function (e) {
                let files = r_in.files;
                if (files.length > 0) {
                    // 获取文件句柄
                    let file = files[0];
                    // 读取文件内容
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let base64String = e.target.result;
                        img.src = base64String;
                        global_var["imgList"] = base64String;
                        input_img.setAttribute("data-text", "");

                    };
                    // 读取文件为 Base64编码
                    reader.readAsDataURL(file);
                }
            });
        })();

        // 发布按钮的点击事件
        const send_btn = document.querySelector('.send-btn');
        send_btn.addEventListener('click', function (e) {
            if (!global_var["imgList"] && !document.querySelector(".text").innerText) {
                alert("图片和文字不可以都为空");
                return ;
            }
            
            let imgList = global_var["imgList"];
            let intor = document.querySelector(".text").innerText;
            let data = {imgList: imgList || "", intor: intor || ""};

            const xhr = new XMLHttpRequest();
            let value = localStorage.getItem("jwt");
            
            xhr.open('post', '/post/create', true);  // 初始化一个请求
            xhr.setRequestHeader('authorization', value);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function(e) {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        window.location.href = '/main.html';
                    }
                    if (xhr.status == 406) {
                        alert("图片和文字不可以都为空");
                    }
                }
            }
            xhr.send(JSON.stringify(data));
        });
    </script>
</body>
</html>
